<template>
  <view class="containerxxx">


      <!-- 翻译工作台 -->
      <template v-if="identity_type == 11">
        <view class="header" :style="{ paddingTop: statusBarHeight + 'px' }" @click.stop="onGoLand('authTranslate')">
          <view class="header-w">
            <view class="left-user-info">
              <view class="avatar-w">
                <view class="avatar">
                  <image :src="getImageUrl(userInfo.avatar)" mode="aspectFill"></image>
                  <u-badge  type="success" is-dot absolute :offset="[0, 0]" v-if="fanyiObj.status == 1"></u-badge>
                  <u-badge  type="error" is-dot absolute :offset="[0, 0]" v-if="fanyiObj.status == 0"></u-badge>
                </view>
                <view class="country">
                  <image :src="createNational(userInfo.country ? userInfo.country : 0).imgurl" mode="aspectFill"></image>
                </view>
              </view>
              <view class="desc-w">
                <view class="name ellipsis">{{ userInfo[plang('username')] }}</view>
                <view class="bottom-tag">
                  <view class="tag">
                    <view class="vip-circle">
                      <image :src="memberLevel(userInfo.level).imgurl"></image>
                    </view>
                    <view class="company">{{ userInfo[$t('item.user.identity_name')] }}</view>
                  </view>
                    <!-- 认证状态 -->
                  <view class="renzhen" @click.stop="onGoLand('authTranslate')" v-if="fanyiObj.is_renzheng != 2">
                    {{ [$t('未认证'), $t('审核中'),$t('已认证'),$t('审核失败')][fanyiObj.is_renzheng] }}
                  </view>
                </view>
              
              </view>
            </view>
            <view class="right-options translate-set">
              <view :class="{'apply-shop': true, 'active': fanyiObj.status == 1,'actived': fanyiObj.status == 0}" @click.stop="onGoLand('jiedan')" >{{ fanyiObj.status == 0 ? $t('暂停接单') : $t('开始接单') }}
              </view>
              <view class="apply-shop" @click.stop="onGoLand('authTranslate')" v-if="lang == 'zh'">{{ $t('修改资料') }}</view>
              <view v-else style="height: 28rpx;"></view>
            </view>
          </view>
        </view>
        <!-- 采购信息 -->
        <view class="caigou-wrappper">
          <view class="caigou" @click="onGoLand('orderRecord')">
            <view class="name">{{ $t('订单记录') }}</view>
          </view>
          <view class="caigou two" @click="onGoLand('trans-service')">
            <view class="name">{{ $t('发布问询服务') }}</view>
          </view>
        </view>
      </template>


      <!-- 普通工作台 -->
      <template v-else>
        <view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
          <view class="header-w" @click="onGoLand('audit')">
            <view class="left-user-info">
              <view class="avatar-w">
                <view class="avatar">
                  <image :src="getImageUrl(userInfo.avatar)" mode="aspectFill"></image>
                </view>
                <view class="country">
                  <image :src="createNational(userInfo.country ?  userInfo.country : 0).imgurl" mode="heightFix"></image>
                </view>
              </view>
              <view class="desc-w">
                <view class="name ellipsis">{{ userInfo[plang('username')] }}</view>
                <view class="bottom-tag">

                  <view class="tag">
                    <view class="vip-circle">
                      <image :src="memberLevel(userInfo.level).imgurl"></image>
                    </view>
                    <view class="company">{{ userInfo[$t('item.user.identity_name')] }}</view>
                  </view>
                  <!-- 认证状态 -->
                  <view class="renzhen" @click.stop="onGoLand('audit')" v-if="userInfo.is_audit != 2">
                    {{ [$t('未认证'), $t('审核中'),$t('已认证'), $t('审核失败')][userInfo.is_audit] }}
                  </view>
                </view>
              </view>
            </view>
            <view class="right-options">
              <image src="/static/work/cr.png"></image>
              <!-- <view class="apply-shop" v-if="identity_type== 0&&userInfo.is_audit != 0" @click.stop="addGood">{{ $t('添加商品') }}</view> -->
              <view class="apply-shop" @click.stop="isShare = true" v-if="identity_type == 0">{{ $t('PC网址') }}</view>
            </view>
          </view>
        </view>
        <!-- 采购信息 -->
        <view class="caigou-wrappper">
          <view class="caigou" @click="onGoLand('caigouPublish')" v-if="vipPrivilegeGet('发布采购询单',true,true)">
            <view class="name">{{ $t('发布采购信息') }}</view>
            <!-- <view class="desc">{{ $t('一键发布') }}</view> -->
          </view>
          <view class="caigou two" @click="onGoLand('shipping')">
            <view class="name">{{ $t('我要发货') }}</view>
            <!-- <view class="desc">{{ $t('一键发送') }} </view> -->
          </view>
        </view>
      </template>



      <scroll-view scroll-y class="xxx-order" :style="[getHeight()]">
        <!-- 订单 -->
        <view class="order-wrapper">
          <view class="list" v-for="(item, index) in lists" :key="index"  v-if="identity_type != 11 && !item.isTranslate || identity_type == 11" >
            <view class="dt" >{{ item.title }}</view>
            <view class="dd">
              <template v-for="(icon, index) in item.list">
                
                <template v-if="icon.key === 'addGood' ? icon.show : !icon.show">
                  <view class="icon" @click="onGoLand(icon.key)" v-if="shouldShowIcon(icon.key)" >
                    <image :src="icon.icon" />
                    <text>{{ icon.title }}</text>
                    <view class="dot" v-if="icon.isDot">
                      {{ icon.isDot }}
                    </view>
                  </view>
                </template>

              </template>

            </view>
          </view>
          <view style="height: 130rpx;"></view>
        </view>
      </scroll-view>





    <u-mask :show="isShare" @click="isShare = false">
      <view class="pa flex-column tc copy_wrap" @click.stop>
        <view class="w100p title">
          {{ $t('申请店铺') }}
        </view>
        <view class="w100p con_wrap">
          <view class="w100p xx">
            {{ $t('申请网址为') }}：
          </view>
          <view class="w100p" @click="copyHtml">
            <view class="blue">{{HTTP_SHOPPING_URL}}/business/#/ <image src="/static/work/fuHi.png"></image>
            </view>
            <view class="txt">{{ $t('推荐你使用Chrome浏览器') }}</view>
          </view>
        </view>
        <view class="w100p btn_wrap" @click="isShare = false">
          {{ $t('确定') }}
        </view>
      </view>
    </u-mask>


    <!-- 接单设置 -->
    <u-popup v-model="acceptSet" border-radius="34" mode="bottom">
      <view class="pop-wrapper">
        <view class="headerxx">
          <image src="/static/caigou/chacha.png" @click="onClose" />
        </view>
        <view class="scroll-w">
          <scroll-view scroll-y>
            <view class="lists">
              <view :class="{ list: true, 'active': index == currentIndexJiedan }" v-for="(item, index) in jiedanLists"
                :key="index" @click="onChangeTapJiedan(index)">
                {{ item.title }}
              </view>
            </view>
          </scroll-view>
        </view>

        <view class="btn" @click="confirmJiedan">{{ $t('确定') }}</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  IMAGE_URL,
} from "@/config/app"

import { state_work, staff_set_status, getUserHomepage } from '@/api/basic';

import { getCheckAndBuyStatus,getInProgressExhibition } from '@/api/online';


import { isMessageGo,createNational,memberLevel } from '@/assets/public'
import { getNumberList } from '@/api/basic';
import { HTTP_SHOPPING_URL } from '@/config/app';
export default {
  data() {
    return {
      HTTP_SHOPPING_URL,
      isShare: false,
      lang: '',
      statusBarHeight: uni.getStorageSync('statusBarHeight'),
      userInfo: {},
      lists: [{
        title: this.$t('发布信息'),
        isTranslate: true,
        list: [{
          title: this.$t('我要发货'),
          icon: this.getImageUrl('/shopstatic/work/cai-1.png'),
          key: 'shipping',
        },
        {
          title: this.$t('我要采购'),
          // icon: '/static/work/cai-1.png',
          icon:this.getImageUrl('/shopstatic/work/cai-1.png'),
          key: 'caigouPublish',
        }]
      },{
        title: this.$t('商机线索'),
        list: [{
          title: this.$t('采购寻单'),
          // icon: '/static/work/cai-1.png',
          icon:this.getImageUrl('/shopstatic/work/cai-1.png'),
          key: 'caigou',
          isDot: 0,
        },{
          title: this.$t('未接来电'),
          // icon: '/static/work/xuxx.png',
          icon:this.getImageUrl('/shopstatic/work/xuxx.png'),
          key: 'xundanInfo',
          isDot: 0,
        }, {
          title: this.$t('购物车'),
          // icon: '/static/work/car1.png',
          icon:this.getImageUrl('/shopstatic/work/car1.png'),
          key: 'cart',
          isDot: 0,
        }, 
        {
          title: this.$t('添加商品'),
          icon: '/static/work/tongji.png',
          key: 'addGood',
        },
        {
          title: this.$t('代销商品'),
          icon: '/static/work/daixiao.png',
          key: 'daixiao',
          isDot: 0,
        }
      ]
      }, {
        title: this.$t('订单管理'),
        list: [{
          title: this.$t('商城订单'),
          // icon: '/static/work/shop.png',
          icon:this.getImageUrl('/shopstatic/work/shop.png'),
          key: 'order_count',
          isDot: 0,
        },{
          title: this.$t('采购订单'),
          // icon: '/static/work/cai-3.png',
          icon:this.getImageUrl('/shopstatic/work/cai-3.png'),
          key: 'successOrder',  
          isDot: 0,
        },{
          title: this.$t('服务订单'),
          // icon: '/static/work/cai-3.png',
          icon:this.getImageUrl('/shopstatic/work/cai-3.png'),
          key: 'serviceOrder',
          isDot: 0,
        },]
      }, {
        title: this.$t('展会管理'),
        list: [{
          title: this.$t('展会直播'),
          // icon: '/static/work/onlin-1.png',
          icon:this.getImageUrl('/shopstatic/work/onlin-1.png'),
          key: 'ExhibitionAndConference',
        }, {
          title: this.$t('展会管理'),
          // icon: '/static/work/onlin-2.png',
          icon:this.getImageUrl('/shopstatic/work/onlin-2.png'),
          key: 'ExhibitionAndManage',
        }, {
          title: this.$t('展位购买'),
          // icon: '/static/work/onlin-4.png',
          icon:this.getImageUrl('/shopstatic/work/onlin-4.png'),
          key: 'ExhibitionLand',
          isDot: 0,
        }, {
          title: this.$t('直播间链接'),
          // icon: '/static/work/onlin-4.png',
          icon:this.getImageUrl('/shopstatic/work/onlin-4.png'),
          key: 'liveLink',
        }]
      }, {
        title: this.$t('运输信息'),
        list: [{
          title: this.$t('发货记录'),
          // icon: '/static/work/huodai-2.png',
          icon:this.getImageUrl('/shopstatic/work/huodai-2.png'),
          key: 'fahuojilu',
          isDot: 0,
        }, {
          title: this.$t('货物运踪'),
          // icon: '/static/work/huodai-1.png',
          icon:this.getImageUrl('/shopstatic/work/huodai-1.png'),
          key: 'yunzong_a',
          isDot: 0,
        },
        {
          title: this.$t('异常反馈'),
          // icon: '/static/work/huodai-3.png',
          icon:this.getImageUrl('/shopstatic/work/huodai-3.png'),
          key: 'fankui_a',
          isDot: 0, 
         
        },
        {
          title: this.$t('车源信息'),
          // icon: '/static/work/cheyuan.png',
          icon:this.getImageUrl('/shopstatic/work/cheyuan.png'),
          key: 'total_car_count',
          isDot: 0,
        },
        ]
      }],
      // 接单设置
      acceptSet: false,
      jiedanLists: [{
        title: this.$t('开始接单'),
        id: 1,
      }, {
        title: this.$t('暂停接单'),
        id: 0,
      }],
      currentIndexJiedan: 0,
      fanyiObj: {
        is_renzheng: 0, // 0 未认证 1 审核中 2 已成功 
        status: 0, // 0 未接单 1已接单
      },
      identity_type: 100,
    }
  },

  created() {
  
  },
  onLoad(options) {
    this.lang = uni.getStorageSync('lang');
    this.getData();
    window.onNativeShow = this.getData;

  },
  onShow() {

  },
  mounted() {
   
  },
  methods: {
    async addGood() {
      await this.unAuthRedirect();
      uni.navigateTo({
        url:'/pages/iframe/addGood',
      })
    },
    memberLevel,
    createNational,
    getHeight() {
      return {height: `calc(100vh - 330rpx - ${this.statusBarHeight}px)`}
    },
    getDot(){
      getNumberList({
        user_id: uni.getStorageSync('user_id')
      }).then((res)=> {
        let obj = res.data.data;
        let arr = this.lists;
        arr = arr.map((ele)=>{
          ele.list = ele.list.map((item)=>{
            if (obj[item.key]){
              item.isDot = obj[item.key];
            }
            console.log(item.key,'item.keyitem.key')
            if (item.key == 'addGood') {
              if (this.identity_type == 0){
                item.show = true;
              }
             
            }
            return item;
          })
          return ele;
        })
        this.lists = arr;
      })
    },
    getData() {
      this.getUserInfo()
      this.getWork();
    },
    getWork() {
      // uni.showLoading({
      //   title:'loading...',
      // })
      state_work({
        user_id: uni.getStorageSync('user_id')
      }).then((res) => {
        if (res.data.code == 1) {
          this.fanyiObj = res.data.data.data;
          this.currentIndexJiedan = res.data.data.data.status == 0 ? 1 : 0;
        }
        uni.hideLoading({})

      })
    },

    onJiedanSet() {
      this.acceptSet = true;
    },
    async confirmJiedan() {
      try {
        let res = await staff_set_status({
          user_id: uni.getStorageSync('user_id'),
          status: this.jiedanLists[this.currentIndexJiedan].id,
        })

        uni.showToast({
          title: res.status == 0 ? this.$t('暂停成功') : this.$t('开启成功'),
        })
        setTimeout(() => {
          this.getWork();
        }, 700);

      } catch (error) {
        console.log(error, '错误')
      }
      this.acceptSet = false;
    },
    onClose() {
      this.acceptSet = false;
    },
    // 接单
    onChangeTapJiedan(index) {
      this.currentIndexJiedan = index;
    },
    copyHtml() {
      uni.setClipboardData({
        data: `${HTTP_SHOPPING_URL}/business/#/`,
        success: () => {
          uni.showToast({
            title: this.$t('复制成功'),
            icon: 'none',
          })
        }
      })
    },
    //个人资料跳转
    personal() {
      let identity_type = this.identity_type;
      switch (+identity_type) {
        case 0: // 供应商
        case 1: // 经销商
          uni.navigateTo({
            url: '/pages/suppire/index?is_renzheng=' + this.userInfo.is_audit + '&identity_id=' + this.userInfo.identity_id,
            webview: 'zWebView',
          })
          break;
        case 3: // 采购商
        case 12: // 个人

          uni.navigateTo({
            url: '/pages/caigou/index?is_renzheng=' + this.userInfo.is_audit + '&identity_id=' + this.userInfo.identity_id + '&identity_type=' + identity_type,
            webview: 'zWebView',
          })
          break;
        case 9: // 服务商
          uni.navigateTo({
            url: '/pages/fuwu/index?is_renzheng=' + this.userInfo.is_audit + '&identity_id=' + this.userInfo.identity_id,
            webview: 'zWebView',
          })
          break;
      }
    },
    // 获取数据
    async getUserInfo() {
      let res = await getUserHomepage({
        user_id: uni.getStorageSync('user_id')
      });

      if (res.data.code == 1) {

        let userinfo = res.data.data.userInfo;
        uni.setStorageSync("userInfoFull", userinfo)

        this.identity_type = userinfo.identity_type || '';

        this.userInfo = userinfo
        this.userInfo.avatar = this.userInfo.avatar
        this.getDot();

      }





    },
    getLiveStatus() {
      return new Promise((resolve,reject)=> {
        
        getCheckAndBuyStatus({
          userId: uni.getStorageSync('user_id')
        }).then((res)=> {
          if (res.data.code == 0) {
            resolve(res.data.data)
          } else {
            uni.showToast({
              // title: res.data.msg,
              title: res.data[this.plang('msg')],
              icon: 'none',
            })
          }
        }).catch((rex)=> {
         
        })
      })
    },
    async  copyLink(exhibitorId) {
      let url = `/pages/OnlineScene/index?exhibitorId=${exhibitorId}&webview=zWebViewOline|${this.lang == 'ru' ? 'Пожалуйста, перейдите по ссылке, чтобы войти в комнату прямой трансляции' : '请点击链接进入直播间'}`;
				try {
					await uni.setClipboardData({
						showToast: false,
						data: url
					})
				
					uni.showToast({
						title: this.$t('复制成功'),
					})
	
					
				} catch (error) {
					uni.showToast({
						title: this.$t('复制失败'),
						icon: 'none'
					})
				}
			},
    async onGoLand(jmpKey) {
      if (this.lang == 'zh') {
        await this.unAuthRedirect();
      }
      
      switch (jmpKey) {
        case 'ExhibitionAndManage': // 展会管理
        case 'ExhibitionLand': // 地块购买
        case 'ExhibitionAndConference': // 开直播
        case 'liveLink': // 开直播


          if (!this.vipPrivilegeGet('开启展会直播')) {
            return;
          }
          let {buyStatus,checkStatus,exhibitorId,exhibitionId} = await this.getLiveStatus();
         
          if (jmpKey == 'ExhibitionAndConference' || jmpKey == 'liveLink') {
            if (checkStatus == 1) {
              if (jmpKey == 'liveLink') {
           
                uni.showModal({
                  title: this.$t('提示'),
                  content: this.$t('请复制链接，聊天发送给站内好友加入直播间观看吧！'),
                  confirmText: this.$t('预览链接'),
                  cancelText: this.$t('复制链接'),
									cancelColor: 'rgb(6, 195, 110)',
                  success: (res) => {
                    if (res.confirm) {
                      uni.navigateTo({
                        url: '/pages/OnlineScene/index?exhibitorId=' + exhibitorId,
                        webview: 'zWebViewOline',
                      })
                    } else {
                      this.copyLink(exhibitorId)
                    }
                  }
                })
              } else {
                isMessageGo({
                  action: 'openLive',
                  data: {
                    id: exhibitionId
                  }
                })
              }
             
            } else {
              if (buyStatus ==0) {
                uni.showToast({
                  title: this.$t('暂未购买地块'),
                  icon: 'none',
                })
              } else {
                uni.showToast({
                  title: this.$t('展会信息在审核中...'),
                  icon: 'none',
                })
              }
              
            }
            
          } else if(jmpKey == 'ExhibitionAndManage') {
            if (buyStatus == 1) {
              uni.navigateTo({
                url: '/pages/EventManagement/index?exhibitorId=' + exhibitorId,
                webview: 'zWebViewOline',
              })
            } else {
              uni.showToast({
                title: this.$t('请购买地块'),
                icon: 'none',
              })
            }
            
          } else if (jmpKey == 'ExhibitionLand') {
            uni.navigateTo({
              url: '/pages/online/index',
              webview: 'zWebViewOline',
            })
          }
     
          break;

        case 'shipping':  //发货
            uni.navigateTo({
              url: '/pages/publish/start',
              webview: 'zWebView',
            })
          break;
        case 'online':  // 跳入线上展会
          uni.navigateTo({
            url: '/pages/online/index',
            webview: 'zWebViewOline',
          })
          break;
        case 'caigou':  // 采购寻单
          uni.navigateTo({
            url: '/pages/caigou/index/index',
            webview: 'zWebViewShop',
          })
          break;
        case 'caigouPublish':  // 采购寻单
            if (this.lang == 'zh') {
              await this.unAuthRedirect();
            }
            uni.navigateTo({
              url: '/pages/caigou/publishInfo/index',
              webivew: 'zWebViewShop',
            })

          break;
        case 'fahuojilu':  // 发货记录
          uni.navigateTo({
            url: '/pages/shipmentRecord/index',
            webview: 'zWebView',
          })
          break;
        case 'yunzong_a':  // 货物运踪
          uni.navigateTo({
            url: '/pages/shipmentRecord/index?status=3',
            webview: 'zWebView'
          })
          break;
        case 'fankui_a':  // 异常反馈
          uni.navigateTo({
            url: '/pages/shipmentRecord/index?status=3&goods_type=2',
            webview: 'zWebView'
          })
          break;
        
          case 'total_car_count':  // 车源信息
          uni.navigateTo({
						url: "/pages/vehicleSourceInformation/index",
            webview: 'zWebView'
					})
          break;
          
        case 'successOrder':  // 成交订单
          uni.navigateTo({
            url: '/pages/caigou/order/index',
            webview: 'zWebViewShop'
          })
          break;
          case 'serviceOrder':  // 服务订单
          if (this.lang == 'zh') {
            await this.unAuthRedirect();
          }
          uni.navigateTo({
            url: '/pages/tabbar/newUser/serviceOrder/index',
            webview: 'zWebViewShop'
          })
          break;

          
        case 'order_count':  // 商城订单
          uni.navigateTo({
            url: '/pages/shopOrder/order/index',
            webview: 'zWebViewShop',
          })
          break;
        case 'xundanInfo':  // 询单信息
          uni.navigateTo({
            url: '/pages/caigou/searchInformation/index',
            webview: 'zWebViewShop',
          })
          break;
        case 'cart':  // 购物车
          uni.navigateTo({
            url: '/pages/caigou/shopCart/index',
            webview: 'zWebViewShop',
          })
          break;
        // pc网址
        case 'addGood': // 添加商品
          this.addGood();
          break;
        // 代销商品
        case 'daixiao':
          uni.navigateTo({
            url: '/consignmentProducts/index/index',
            webview: 'zWebViewDaixiao'
          })
          break;
        // 发布问询
        case 'trans-service':
            uni.navigateTo({
              url: '/pages/translate/publishService/index',
              webview: 'zWebView',
            })

          break;

        // 翻译认证
        case 'authTranslate':
            uni.navigateTo({
              url: '/pages/translate/authTranslate/index?is_renzheng=' + this.fanyiObj.is_renzheng,
              webview: 'zWebView',
            })

          break;

        case 'orderRecord': // 订单记录
            if (this.lang == 'zh') {
              await this.unAuthRedirect();
            }
            uni.navigateTo({
              url: '/pages/translate/orderList/index',
              webview: 'zWebView',
            })

          break;

        case 'jiedan': // 接单
            this.onJiedanSet();
          break;

        //供应商采购商服务商认证
        case 'audit':
          this.personal();
          break;

      }
    },
    shouldShowIcon(key) {
      // 处理特殊需要VIP权限的图标
      if (key === 'total_car_count') {
        return this.vipPrivilegeGet('车源信息', true, true);
      } else if (key === 'caigou') {
        return this.vipPrivilegeGet('观看采购询单', true, true);
      }
      // 其他图标默认显示
      return true;
    }
  },
}






</script>


<style lang="scss" scoped>
.containerxxx {
  height: 100vh;

  .xxx-order {
    height: 100%;
    width: 100%;
  }
}

.containerxxx {
  background-color: #F6F7FB;
  width: 100%;


  .header {
    background: url('~@/static/work/header-bg.png') no-repeat;
    background-size: 100% auto;
    height: 596rpx;
    box-sizing: content-box;

    .header-w {
      padding: 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 30rpx;

      .left-user-info {
        display: flex;

        .avatar-w {
          margin-right: 22rpx;
          position: relative;
          height: 100rpx;

          .avatar {
            width: 98rpx;
            height: 98rpx;
            padding: 2rpx;
            background: #fff;
            border-radius: 18rpx;
            // overflow: hidden;
            transform: rotate(-15deg);
            position: relative;
            top: 10rpx;

            image {
              width: 100%;
              height: 100%;
              border-radius: 18rpx;
            }
          }

          .country {
            box-sizing: border-box;
            padding: 2rpx;
            background: #fff;
            border-radius: 8rpx;
            display: inline-block;
            position: absolute;
            bottom: -28rpx;
            left: 10rpx;

            image {
              border-radius: 8rpx;
              width: 86rpx;
              height: 32rpx;
              display: block;
            }
          }
        }

        .desc-w {
          padding-top: 6rpx;
          flex: 1;

          .name {
            color: #1D1D1D;
            font-size: 34rpx;
            font-weight: 600;
            margin-bottom: 16rpx;
            max-width: 400rpx;

          }

          .bottom-tag {
            display: flex;
            align-items: center;

            // 未认证
            .renzhen {
              color: #EE1C25;
              font-size: 24rpx;
              font-weight: 400;
              text-decoration: underline;
              margin-left: 20rpx;
            }
          }


          .tag {
            display: inline-flex;
            align-items: center;
            height: 50rpx;
            border-radius: 25rpx;
            background: linear-gradient(270deg, #FFFEFD -1.7%, #FFD392 99.89%);
            box-shadow: 1rpx 1rpx 4.4rpx 0px rgba(63, 137, 222, 0.55);
            padding-right: 16rpx;

            .vip-circle {
              width: 46rpx;
              height: 46rpx;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              box-shadow: 0 0 5rpx 0 #999;
              margin-right: 14rpx;

              image {
                width: 30rpx;
                height: 30rpx;
              }
            }

            .company {
              color: #5D3800;
              font-size: 24rpx;
              font-weight: 500;
            }
          }
        }
      }

      .right-options {
        text-align: right;

        &.translate-set {
          .apply-shop {
            &:first-child {
              margin-bottom: 28rpx;
            }
          }
        }

        image {
          width: 50rpx;
          height: 42rpx;
          margin-bottom: 28rpx;
        }

        .apply-shop {
          color: #0039A6;
          font-size: 24rpx;
          text-decoration: underline;
          &.active {
            color: #00C853;
          }
          &.actived {
            color: #FF0000;
          }
        }
      }
    }
  }

  .caigou-wrappper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24rpx;
    margin-bottom: 24rpx;
    position: relative;
    margin-top: -420rpx;

    .caigou {
      width: 338rpx;
      height: 135rpx;
      background: url('~@/static/work/left1.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      &.two {
        background: url('~@/static/work/left2.png') no-repeat;
        background-size: 100% 100%;
        .name {
          color: #007AFF;
        }
      }

      .name {
        color: #FF6A00;
        font-size: 30rpx;
        font-weight: 500;
        padding-left: 18rpx;
        padding-right: 90rpx;
      }

      .desc {
        color: #B6B6B6;
        font-size: 22rpx;
        line-height: 24rpx;
        padding-left: 22rpx;
      }
    }
  }

  // 订单
  .order-wrapper {
    margin: 0 24rpx;
    background: linear-gradient(to bottom, #DDEDFB 0%, #EFF5FB 20%, #F9FCFE);
    padding-top: 35rpx;
    border-radius: 18rpx;
    padding-bottom: 35rpx;
    position: relative;

    .list {
      margin-bottom: 46rpx;

      .dt {
        color: #000;
        font-size: 26rpx;
        font-weight: 600;
        padding-bottom: 40rpx;
        padding-left: 30rpx;
        padding-right: 30rpx;
      }

      .dd {
        display: flex;
        flex-wrap: wrap;

        .icon {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 25%;
          position: relative;
          &:nth-child(n + 5) {
            margin-top: 20rpx;
          }
          image {
            width: 70rpx;
            height: 70rpx;
            margin-bottom: 16rpx;
          }
          .dot {
            position: absolute;
            top: -12rpx;
            right: 24rpx;
            padding: 0 12rpx;
            height: 22rpx;
            background-color: #FF0000;
            border-radius: 8rpx;
            border-top-left-radius: 20rpx;
            border-bottom-right-radius: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 16rpx;
          }

          text {
            color: #333;
            text-align: center;
            font-size: 26rpx;
          }
        }

      }
    }
  }
}

.containerxxx {
  .copy_wrap {
    width: 702rpx;
    height: 492rpx;
    background-color: #fff;
    border-radius: 12rpx;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding: 40rpx 40rpx 24rpx 40rpx;
    justify-content: space-between;
    line-height: 1.2;

    image {
      width: 38rpx;
      height: 38rpx;
    }

    .title {
      font-size: 32rpx;
      color: #262728;
      font-weight: 600;
    }

    .con_wrap {
      font-size: 28rpx;
      color: #1D2129;
      text-align: left;

      .xx {
        margin-bottom: 30rpx;
      }

    }

    .btn_wrap {
      font-size: 28rpx;
      color: #fff;
      background: #007AFF;
      border-radius: 12rpx;
      height: 80rpx;
      line-height: 80rpx;
    }

    .blue {
      display: flex;
      align-items: center;
      font-weight: 600;
      width: 100%;
      color: #007AFF;

      image {
        margin-left: 13rpx;
      }
    }

    .txt {
      margin-top: 8rpx;
    }
  }

  .pa {
    position: absolute;
  }

  .tc {
    text-align: center;
  }

  .w100p {
    width: 100%;
  }

  .flex-column {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}


// 接单设置
.pop-wrapper {
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;

  .headerxx {
    height: 110rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 44rpx;

    image {
      width: 26rpx;
      height: 26rpx;
    }
  }

  .scroll-w {
    scroll-view {
      max-height: 48vh;
    }
  }

  // 列表
  .lists {
    padding: 0 48rpx;

    .list {
      height: 94rpx;
      border-radius: 18rpx;
      border: 1px solid #F0F0F0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333;
      font-size: 32rpx;
      font-weight: 400;
      margin-bottom: 24rpx;

      &.active {
        border: 1px solid #278AFF;
        background: #278AFF;
        color: #fff;
      }
    }
  }


  .btn {
    height: 94rpx;
    border-radius: 18rpx;
    background: #007AFF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 30rpx;
    font-weight: 600;
    margin: 20rpx 24rpx;
  }

}
</style>
